<template>
  <div class="app">
    <div class="head">
      <div class="head-logo">
        <div class="head-logo-left">
          <img src="../../assets/img/logo.png" />
          <p><span>{{saveCompanyMsg.companyChiName?saveCompanyMsg.companyChiName:saveCompanyMsg.companyEngName}}</span> </p>
        </div>
        <div v-show="canUsed" class="head-logo-right">
          <div v-show="ifEdit">
            <el-button icon="el-icon-circle-close" v-show="saveCompanyMsg.cmhkStatus=='注销'?false:true" size="small" @click="handleOut">产权退出</el-button>
            <el-button icon="el-icon-edit" v-show="canEdit" type="primary" size="small" @click="handleEdit">修改</el-button>
          </div>
          <div v-show="!ifEdit">
            <el-button size="small" @click="handleCancel">取消</el-button>
            <el-button type="primary" size="small" @click="handleSave">保存</el-button>
          </div>
        </div>
        <div v-if="hasHistory" class="histroy">
          <span>数据日期：</span>
          <el-date-picker
            style="width: 65%"
            clearable
            v-model="saveCmhkId.queryDate"
            size="small"
            @change="selectHistoryDate" 
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </div>
      </div>
      <div class="head-msg">
        <el-row>
          <el-col :span="4">
            <p>招商局代码：<span>{{saveCmhkId.cmhkId}}</span></p>
          </el-col>
          <el-col :span="12">
            <p>英文名称：<span>{{saveCompanyMsg.companyEngName}}</span></p>
          </el-col>
          <el-col :span="8">
            <p>注册类型：<span>{{saveCompanyMsg.registerName}}</span></p>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="管控信息" name="second" v-if="ifControl">
          <div class="box-card">
            <ControlMsg ref="ControlMsg" :controlMsg="controlMsg" @changeStateControl="changeStateControl" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="注册信息" name="first" v-if="ifRegister">
          <div class="box-card">
            <RegisterMsgForm ref="RegisterMsgForm" :registerForm="registerForm" @changeState="changeState" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="治理机构" name="third" v-if="ifManage">
          <div class="box-card">
            <GoverningBody ref="governingBody" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="股东持股" name="sixth" v-if="ifShareMsg">
          <div class="box-card">
            <ShareMsg ref="ShareMsg" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="出资情况" name="seventh" v-if="ifOutmoney">
          <div class="box-card">
            <OutMoney ref="OutMoney" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="出资情况" name="eightth" v-if="ifFriends"> <!--合伙人出资情况-->
          <div class="box-card">
            <Partner ref="Partner" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="基本信息" name="nineth" v-if="ifBranch">
          <div class="box-card">
            <BasicMsg ref="BasicMsg" :nineth="nineth" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="直接投资" name="fiveth" v-if="ifAccount">
          <div class="box-card">
            <DirectMoney ref="DirectMoney" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="档案" name="tenth" v-if="ifDocx">
          <div class="box-card">
            <Files ref="Files" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="财务指标" name="eleven" v-if="ifFinanceKpi">
          <div class="box-card">
            <FinanceKpi ref="FinanceKpi" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="股票信息" name="stockInfor" v-if="ifStockInfor">
          <div class="box-card">
            <StockInfor ref="stockInfor" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <Dialog ref="outDialog" :dialogData="dialogData" @on-close="closeDialog" />
  </div>
</template>

<script>
import Dialog from './components/PROutDialog'
import RegisterMsgForm from './components/RegisterMsg'
import GoverningBody from './components/GoverningBody'
import TableComponent from '@/components/Table/table'
import ControlMsg from './components/ControlMsg'
import DirectMoney from './components/DirectMoney'
import ShareMsg from './components/ShareMsg'
import Partner from './components/Partner'
import BasicMsg from './components/BasicMsg'
import Files from './components/Files'
import FinanceKpi from './components/FinanceKpi'
import OutMoney from './components/OutMoney'
import StockInfor from './components/stockInfor'
export default {
  components: {
    Dialog,
    RegisterMsgForm,
    GoverningBody,
    TableComponent,
    ControlMsg,
    DirectMoney,
    ShareMsg,
    Partner,
    BasicMsg,
    OutMoney,
    Files,
    FinanceKpi,
    StockInfor
  },
  data() {
    return {
      saveCmhkId: {
        cmhkId: '',
        cmhkStatus: '',
        queryDate: null
      },
      saveCompanyMsg: {
        companyChiName: '',
        companyEngName: '',
        registerType: '',
        registerTypeDetail: '',
        registerName: '',
        cmhkStatus: ''
      },
      activeName: '',
      ifRegister: false,
      ifControl: false,
      ifManage: false,
      ifAccount: false,
      ifShareMsg: false,
      ifOutmoney: false,
      ifFriends: false,
      ifBranch: false,
      ifDocx: false,
      ifFinanceKpi: false,
      ifStockInfor: false,
      registerForm: {
        ifDisabled: true
      },
      controlMsg: {
        ifDisabled: true
      },
      nineth: {
        ifDisabled: true
      },
      dialogData: {
        dialogVisible: false,
        companyCode: '',
        cmhkId: '',
        registerType: ''
      },
      ifEdit: true, // tab页切换时重置按钮状态
      canEdit: true, // 不可修改页签隐藏修改按钮
      canUsed: true, // 判断权限控制
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6 // 如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      hasHistory: true
    }
  },
  mounted() {
    const key = this.$store.state.key.resourceCode
    if (key === '0') {
      this.canUsed = false
    } else {
      this.canUsed = true
    }
    console.log(this.$route.query)
    this.saveCmhkId.cmhkId = this.$route.query.cmhkId
    this.saveCmhkId.cmhkStatus = this.$route.query.cmhkStatus
    // this.saveCompanyMsg.companyChiName = this.$route.query.companyChiName
    // this.saveCompanyMsg.companyEngName = this.$route.query.companyEngName
    // this.saveCompanyMsg.registerType = this.$route.query.registerType
    // this.saveCompanyMsg.registerTypeDetail = this.$route.query.registerTypeDetail
    // this.saveCompanyMsg.registerName = this.$route.query.registerName
    // this.saveCompanyMsg.cmhkStatus = this.$route.query.cmhkStatus
    this.saveCompanyMsg = this.$route.query
    this.dialogData.companyCode = this.$route.query.companyCode
    this.dialogData.cmhkId = this.$route.query.cmhkId
    this.dialogData.registerType = this.$route.query.registerType
    switch (this.saveCompanyMsg.registerType) {
      case '01':
        if (this.saveCompanyMsg.registerTypeDetail === '1.1') {
          this.ifStockInfor = true
        } else {
          this.ifStockInfor = false
        }
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifAccount = true
        this.ifShareMsg = true
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = false
        this.ifDocx = true
        this.ifFinanceKpi = true
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.RegisterMsgForm.addinput()
          this.$refs.RegisterMsgForm.partnerDel()
          this.$refs.governingBody.notpartner()
          this.$refs.ControlMsg.getControlMsg(this.saveCmhkId) // 查询管控信息
        })
      break
      case '02':
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifAccount = true
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = true
        this.ifDocx = true
        this.ifFinanceKpi = true
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.RegisterMsgForm.delinput() // 若为有限责任公司注册信息相关表单项隐藏
          this.$refs.RegisterMsgForm.partnerDel()
          this.$refs.governingBody.notpartner()
          this.$refs.ControlMsg.getControlMsg(this.saveCmhkId) // 查询管控信息
        })
      break
      case '03':
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifAccount = true
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = true
        this.ifDocx = true
        this.ifFinanceKpi = true
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.RegisterMsgForm.delinput()
          this.$refs.RegisterMsgForm.partnerDel()
          this.$refs.governingBody.notpartner()
          this.$refs.ControlMsg.getControlMsg(this.saveCmhkId) // 查询管控信息
        })
      break
      case '04':
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifAccount = true
        this.ifShareMsg = false
        this.ifFriends = true
        this.ifBranch = false
        this.ifOutmoney = false
        this.ifDocx = true
        this.ifFinanceKpi = true
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.RegisterMsgForm.delinput()
          this.$refs.governingBody.ispartner() // 若为合伙企业则治理机构只显示管理层
          this.$refs.RegisterMsgForm.partnerAdd() // 若为合伙企业则添加三个字段
          this.$refs.ControlMsg.getControlMsg(this.saveCmhkId) // 查询管控信息
        })
      break
      case '05':
        this.ifRegister = false
        this.ifControl = false
        this.ifManage = false
        this.ifAccount = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = true
        this.ifOutmoney = false
        this.ifDocx = true
        this.ifFinanceKpi = false
        this.activeName = 'nineth'
        this.$nextTick(() => {
          const params = Object.assign(this.saveCmhkId, this.saveCompanyMsg)
          this.$refs.BasicMsg.getBranchMsg(params) // 查询基本信息数据
          this.$refs.BasicMsg.cmbusinessTypes() // 查询基本信息中的下拉接口
        })
      break
    }
  },
  methods: {
    currentOrHistory() {
      if (this.saveCmhkId.queryDate == null) {
        switch(this.activeName) {
          case 'first':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = true
            const params = Object.assign(this.saveCmhkId, this.saveCompanyMsg)
            this.$refs.RegisterMsgForm.getRegisterinfo(params) // 查询注册信息
            this.$refs.RegisterMsgForm.getOption() // 注册信息中的下拉框数据初始化
            break
          case 'second':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = true
            this.$refs.ControlMsg.getControlMsg(this.saveCmhkId) // 查询管控信息
            break
          case 'third':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.governingBody.getGovernmentBody(this.saveCmhkId) // 查询治理机构
            break
          case 'fiveth':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.DirectMoney.initData(this.saveCmhkId) // 查询直接投资
          break
          case 'sixth':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.ShareMsg.getShareMsg(this.saveCmhkId) // 查询股东持股
          break
          case 'seventh':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.OutMoney.queryOutMoneyMethods(this.saveCmhkId) // 查询出资情况
          break
          case 'eightth':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.Partner.getPartner(this.saveCmhkId) // 查询合伙人信息
          break
          case 'nineth':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = true
            const data = Object.assign(this.saveCmhkId, this.saveCompanyMsg)
            this.$refs.BasicMsg.getBranchMsg(data) // 查询基本信息数据
          break
          case 'tenth':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.nineth.ifDisabled = true
            this.canEdit = false
            this.$refs.Files.queryDocx(this.saveCmhkId) // 档案查询
          break
          case 'eleven':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.FinanceKpi.querycompanyFinance(this.saveCmhkId) // 财务指标查询
          break
          case 'stockInfor':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.stockInfor.querySharePrices(this.saveCmhkId) // 股票信息查询
          break
        }
      } else {
        switch(this.activeName) {
          case 'first':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = true
            this.$refs.RegisterMsgForm.getRegisterinfoHistory(this.saveCmhkId) // 查询注册信息历史数据
            this.$refs.RegisterMsgForm.getOption() // 注册信息中的下拉框数据初始化
          break
          case 'second':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = true
            this.$refs.ControlMsg.getControlMsgHistory(this.saveCmhkId) // 查询管控信息历史数据
          break
          case 'third':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.governingBody.getGovernmentBodyHistory(this.saveCmhkId) // 查询治理机构历史数据
          break
          case 'sixth':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.ShareMsg.getShareMsgHistory(this.saveCmhkId) // 查询股东持股历史数据
          break
          case 'seventh':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.OutMoney.getShareMsgHistory(this.saveCmhkId) // 查询出资情况历史数据
          break
          case 'eightth':
            // 切换tab时 重置表单不可用状态
            this.registerForm.ifDisabled = true
            this.controlMsg.ifDisabled = true
            this.canEdit = false
            this.$refs.Partner.getShareMsgHistory(this.saveCmhkId) // 查询合伙人信息历史数据
          break
        }
      }
    },
    handleClick(val) {
      this.activeName = val.name
      this.ifEdit = true
      if (this.activeName === 'tenth') {
        this.hasHistory = false
        this.saveCmhkId.queryDate = null
        this.currentOrHistory()
      } else if (this.activeName === 'fiveth') {
        this.hasHistory = false
        this.saveCmhkId.queryDate = null
        this.currentOrHistory()
      } else if (this.activeName === 'stockInfor') {
        this.hasHistory = false
        this.saveCmhkId.queryDate = null
        this.currentOrHistory()
      } else {
        this.hasHistory = true
        this.currentOrHistory()
      }
    },
    selectHistoryDate(data) {
     this.currentOrHistory()
    },
    // 点击修改
    handleEdit() {
      switch (this.activeName) {
        case 'first':
          this.ifEdit = false
          this.registerForm.ifDisabled = false
        break
        case 'second':
          this.ifEdit = false
          this.controlMsg.ifDisabled = false
        break
        case 'nineth':
          this.ifEdit = false
          this.nineth.ifDisabled = false
        break
      }
    },
    // 点击取消
    handleCancel() {
      switch (this.activeName) {
        case 'first':
          this.ifEdit = true
          this.registerForm.ifDisabled = true
          this.$refs.RegisterMsgForm.removeRequired()
          const params = Object.assign(this.saveCmhkId, this.saveCompanyMsg)
          this.$refs.RegisterMsgForm.getRegisterinfo(params) // 查询注册信息
          this.$message('取消注册信息修改')
        break
        case 'second':
          this.ifEdit = true
          this.controlMsg.ifDisabled = true
          this.$refs.ControlMsg.removeRequired()
          this.$refs.ControlMsg.getControlMsg(this.saveCmhkId) // 查询管控信息
          this.$message('取消管控信息修改')
        break
        case 'nineth':
          this.ifEdit = true
          this.nineth.ifDisabled = true
          const data = Object.assign(this.saveCmhkId, this.saveCompanyMsg)
          this.$refs.BasicMsg.getBranchMsg(data)
          this.$message('取消基本信息修改')
        break
      }
    },
    // 点击保存
    handleSave() {
      if (this.saveCmhkId.queryDate == null) {
        switch (this.activeName) {
          case 'first':
            this.$refs.RegisterMsgForm.editRegisterinfo() // 修改注册信息
          break
          case 'second':
            this.$refs.ControlMsg.editControlMsg() // 修改管控信息
          break
          case 'nineth':
            this.ifEdit = true
            this.nineth.ifDisabled = false
            this.$refs.BasicMsg.editBranchMsg() // 修改基本信息
          break
        }
      } else {
        switch (this.activeName) {
          case 'first':
            this.$refs.RegisterMsgForm.editRegisterHistroyinfo()
          break
          case 'second':
            this.$refs.ControlMsg.editControlMsgHistroy()
          break
        }
      }
      
    },
    // 保存后修改按钮状态
    changeState(val) {
      this.ifEdit = val
      this.registerForm.ifDisabled = val
    },
    changeStateControl() {
      this.ifEdit = true
      this.controlMsg.ifDisabled = true
    },
    // 产权退出
    handleOut() {
      this.dialogData.dialogVisible = true
      this.$refs.outDialog.initData()
    },
    // 弹窗组件关闭时
    closeDialog(val) {
      this.dialogData.dialogVisible = false
      this.dialogData.companyCode = ''
      this.dialogData.cmhkId = ''
      this.dialogData.registerType = ''
      if (val.isRefresh) {
        console.log('刷新')
        this.$router.push('/query')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .app {
    height: calc(100vh - 60px);
    .head {
      width: calc(100% - 60px);
      padding: 10px 30px;
      height: 70px;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .head-logo {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        position: relative;
        .histroy {
          width: 250px;
          display: flex;
          align-items: center;
          position: absolute;
          top: -3px;
          right: 184px;
          margin-top: 3px;
          span {
            width: 70px;
          }
        }
        .head-logo-left {
          display: flex;
          align-items: center;
          flex-grow: 1;
          p {
            font-size: 16px;
            font-weight: 500;
            margin-left: 10px;
          }
          img {
            width: 24px;
            height: 24px;
          }
        }
      }
      .head-msg {
        height: 40px;
        line-height: 20px;
        p {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.850980392156863);
          span {
            color: rgba(0, 0, 0, 0.650980392156863);
          }
        }
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 120px);
      background-color: #ffffff;
      margin-top: 10px;
      .box-card {
        height: calc(100vh - 250px);
        width: calc(100% - 20px);
        overflow: auto;
      }
    }
  }
</style>
<style>
  .el-card {
    border: none;
  }
  .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    margin-left: 20px;
  }
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }
</style>